<template>
	<view class="content">
		<view class="contents">
			<view class="index-bg"></view>
			<image class="index-logo" src="../../static/index/logo.png"></image>
			<view class="index-divs"></view>
			<view class="index-divss"></view>
			<view class="index-num">{{title}}</view>
			<view class="index-text">{{titles}}</view>
		</view>

		<view class="cont-list">
			<view class="index-list" v-for="(list,index) in lists" :key="index">
				<view class="list-title">
					<view class="list-icon"></view>
					<view class="list-text">{{list.key}}</view>
				</view>
				<view class="list-cont">
					<view class="cont-num" v-for="(listd,index) in list.listdata" :key="index">
						<view class="cont-num-one">{{listd.num}}</view>
						<view class="cont-num-two">{{listd.name}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<image src="../../static/index/bg_shadow.png" class="index-imgs"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 0, //设备总数
				titles: '设备总数',
				lists: [{
						key: '设备统计',
						listdata: [{
								name: '在线设备',
								num: 0
							},
							{
								name: '离线设备',
								num: 0
							},
							{
								name: '报警设备',
								num: 0
							}
						]
					},
					{
						key: '报警统计',
						listdata: [{
								name: '今日报警数',
								num: 0
							},
							{
								name: '未处理报警',
								num: 0
							},
							{
								name: '报警总数',
								num: 0
							}
						]
					},
				]
			}
		},
		onLoad() {
			var loginRes = this.checkLogin('../index/index', '2');
			if (!loginRes) {
				return false;
			}
			this.handleRefresh()
		},
		methods: {
			//获得数据
			handleRefresh() {
				uni.showLoading({
					title: '加载中'
				});
				var username = uni.getStorageSync('userInfo')
				uni.request({
					url: this.apiServer + '/api/index/equipmentCount',
					method: "GET",
					complete() {
						setTimeout(() => {
							uni.hideLoading()
						}, 500)
					},
					success: (res) => {
						var datas = res.data.data;
						//设备总数
						this.title = datas.totalCount;
						//设备统计得数据--在线设备
						this.lists[0].listdata[0].num = datas.onlineCount;
						//离线设备
						this.lists[0].listdata[1].num = datas.offlineCount;
						//报警设备
						this.lists[0].listdata[2].num = datas.warnCount;
						//报警统计得数据--今日报警数
						this.lists[1].listdata[0].num = datas.todayWarn;
						//未处理报警
						this.lists[1].listdata[1].num = datas.noHandleCount;
						//报警总数
						this.lists[1].listdata[2].num = datas.warnTotalCount

					},
					fail: (res) => {
						uni.showToast({
							icon: "none",
							title: res.messages,
						});
					}
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		height: 100vh;
		width: 100%;
		position: relative;
		flex-direction: column;
	}

	.contents {
		position: absolute;
		width: 100%;
		height: 626upx;
		top: 0;
		z-index: 2;
	}

	.cont-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		box-sizing: border-box;
		position: absolute;
		top: 636upx;
		/* height: 544upx; */
		// height: calc(100vh - 694upx);
		/* flex-direction: column; */
		/* background-color: #3F536E; */
		z-index: 1;
	}

	.index-imgs {
		height: 48upx;
		width: 100%;
		position: absolute;
		bottom: 0;
		z-index: 2;
	}

	.index-bg {
		position: absolute;
		top: 0;
		height: 480upx;
		width: 100%;
		background: #2573B0;
		opacity: 1;
		border-radius: 0px 0px 72upx 72upx;
		position: relative;
		z-index: 1;

	}


	.index-logo {
		height: 72upx;
		width: 368upx;
		left: 60upx;
		top: 100upx;
		position: absolute;
		z-index: 2;
	}

	.index-divs {
		position: absolute;
		width: calc(100%-60upx);
		top: 226upx;
		left: 30upx;
		right: 30upx;
		height: 352upx;
		background: #FFFFFF;
		opacity: 1;
		z-index: 2;
		border-radius: 48upx;
		box-shadow: 0 8rpx 6rpx rgba(222, 231, 235, .5);
	}

	.index-divss {
		position: absolute;
		width: calc(100%-120upx);
		top: 256upx;
		height: 292upx;
		background: #F5F7F9;
		opacity: 1;
		border-radius: 48upx;
		left: 60upx;
		right: 60upx;
		z-index: 3;
	}

	.index-num {

		left: 35%;
		top: 316upx;
		text-align: center;
		width: 260upx;
		position: absolute;
		height: 88upx;
		font-size: 72upx;
		font-family: DIN;
		font-weight: bold;
		line-height: 88upx;
		color: #333333;
		opacity: 1;
		z-index: 4;
	}

	.index-text {
		left: 35%;
		top: 420upx;
		text-align: center;
		width: 260upx;
		position: absolute;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 40upx;
		color: #333333;
		opacity: 1;
		z-index: 4;
	}

	.index-list {
		display: flex;
		flex-direction: column;
		width: calc(100% - 60rpx);
		height: 252upx;
		padding: 36upx 30upx 36upx 30upx;
		background: #FFFFFF;
		border-radius: 48upx;
		box-shadow: 0 0 20rpx #DEE8EC;
		box-sizing: border-box;

		&:first-child {
			margin-top: 10rpx;
		}

		&:not(:last-child) {
			margin-bottom: 48upx;
		}
	}

	.list-title {
		position: relative;
		width: 100%;
		height: 40upx;
		/* background-color: red; */
		margin-bottom: 40upx;
	}

	.list-icon {
		position: absolute;
		width: 8upx;
		top: 9upx;
		left: 0;
		height: 24upx;
		background: #3DBCF1;
		opacity: 1;
		border-radius: 48upx;
	}

	.list-text {
		position: absolute;
		top: 0;
		left: 30upx;
		height: 40upx;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 40upx;
		color: #333333;
		opacity: 1;
	}

	.list-cont {
		width: 100%;
		/* height: 106px; */
		display: flex;
		justify-content: space-between;
	}

	.cont-num {
		display: flex;
		padding-left: 20upx;
		padding-right: 20upx;
		flex-direction: column;
		align-items: center;
	}

	.cont-num-one {
		height: 50upx;
		font-size: 36upx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 50upx;
		color: #333333;
		opacity: 1;
	}

	.cont-num-two {
		height: 34upx;
		font-size: 24upx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 34upx;
		color: #999999;
		opacity: 1;
	}
</style>
